<template>
  <div class="container">
    <header class="block2">
      <h2>欢迎使用安监运营管理系统</h2>
      <div style="display:flex">
        <aside>
          <span>用户：{{user}}</span>
          <span>角色：{{role}}</span>
          <span>电话： {{tel}}</span>
        </aside>
        <aside style="margin-left:123px">
          <span>公司：{{com}}</span>
          <span>分公司：{{bcom}}</span>
          <span>部门：{{depart}}</span>
        </aside>
      </div>
    </header>
    <!-- <main>
        <section class="left">
            项目记录
        </section>
        <section class="right">
            操作记录
        </section>
    </main>-->
  </div>
</template>

<script>
import { getuid } from "@/utils/auth";
import { mapGetters } from "vuex";
import request from "@/utils/request";
export default {
  name: "Dashboard",
  data() {
    return {
      user: "",
      role: "",
      tel: "",
      com: "",
      bcom: "",
      depart: ""
    };
  },
  computed: {
    ...mapGetters(["name"])
  },
  created() {
    this.person();
    console.log("改前：", sessionStorage.getItem("ref"));
    if (sessionStorage.getItem("ref") == "1") {
      console.log("refresh......");
      sessionStorage.setItem("ref", "0");
      console.log("改后：", sessionStorage.getItem("ref"));
      location.reload();
    }
  },
  methods: {
    person() {
      var that = this;
      var id = getuid();
      request(`person/find/${id}`, {
        method: "get",
        headers: {
          "Content-Type": "application/json"
        },
        params: ""
      })
        .then(res => {
          that.loading = false;
          console.log(res);
          var d = res.data.object;
          d.map((v, i) => {
            this.user = v.name;
            this.tel = v.telephone;
            this.com = v.company;
            if (v.role == 1) {
              this.role = "管理人员";
            }
            else if (v.role == 2) {
              this.role = "财务人员";
            }
            else if (v.role == 3) {
              this.role = "项目人员";
            }else{
              this.role = "普通人员";
            }
            this.bcom = v.branch;
            this.depart = v.department;
          });
        })
        .catch(e => {
          that.loading = false;
          console.log(e);
        });
    }
  }
};
</script>

<style scoped>
div {
  color: #606266 !important;
}
aside {
  display: flex;
  flex-direction: column;
  margin: 5px 20px;
}
aside span {
  margin: 10px 0;
}
.block2 {
  width: 80%;
  margin: 20px 80px;
  padding: 46px;
  box-shadow: 0 0 10px #dacece;
}
header {
  height: 300px;
}
main {
  height: 300px;
}
.left,
.right {
  width: 50%;
}
.container {
  padding: 10px 15px;
}
</style>
